<template>
	<view class="page-view">
		<navBar title="保养计划"></navBar>
		<view class="bgfff w-100% search-view">
			<view class="w-100% h-88rpx flex-space-between" @click="searchShow = !searchShow">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>检索条件
				</view>
				<image class="w-44rpx h-44rpx select-img mr-32rpx" src="@/static/nav_ic_back_dark.png" mode="" :class="{isSelect:searchShow}"></image>
			</view>
			<view class="" v-if="searchShow">
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<u-form ref="ruleFormRef" :model="form" label-width="160rpx">
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="设备名称" prop="deviceName">
						<u-input v-model="form.deviceName" placeholder="请输入设备名称"/>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="设备编码" prop="deviceCode">
						<u-input v-model="form.deviceCode" placeholder="请输入设备编码"/>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="保养类别" prop="deviceType">
						<u-input :disabled="true" v-model="form.deviceType" placeholder="请选择保养类别" @click="deviceStatusShow = true;typeOrStatus=1"/>
						<image class="w-44rpx h-44rpx qr-img" src="@/static/icon-right.png" mode=""></image>
					</u-form-item>
					<u-form-item class="h-100rpx flex-space-between" :border-bottom="false" label="保养状态" prop="deviceStatus">
						<u-input :disabled="true" v-model="form.deviceStatus" placeholder="请选择保养状态" @click="deviceStatusShow = true;typeOrStatus=2"/>
						<image class="w-44rpx h-44rpx qr-img" src="@/static/icon-right.png" mode=""></image>
					</u-form-item>
				</u-form>
				<view class="search-btn">
					<view class="btn" @click="searchForm">搜索</view>
				</view>
			</view>
		</view> 
		<view class="content-view" :style="mTopFn()" v-if="deviceList?.length>0">
			<view class="bgfff item-view mt-24rpx flex-space-between" v-for="(item,index) in deviceList" :key="index" @click="goFalutHandle(item)" >
				<view class="w-60% flex-wrap-left mb-22rpx">
					<label>设备名称</label>
					<text class="u-line-1">{{item.equpName}}</text>
				</view>
				<view class="w-40% flex-wrap-left mb-22rpx">
					<label>设备编号</label>
					<text class="u-line-1">{{item.equpNo}}</text>
				</view>
				<view class="w-60% flex-wrap-left mb-22rpx">
					<label>设备类型</label>
					<text class="u-line-1">{{item.equpSpec}}</text>
				</view>
				<view class="w-40% flex-wrap-left mb-22rpx">
					<label>保养类别</label>
					<text class="u-line-1">{{item.keepType}}</text>
				</view>
				<view class="w-60% flex-wrap-left">
					<label>保养日期</label>
					<text class="u-line-1">{{item.keepDate}}</text>
				</view>
				<view class="w-40% flex-wrap-left">
					<label>保养状态</label>
					<text class="u-line-1">{{item.keepStatus}}</text>
				</view>
				
			</view>
		</view>
		<empty v-if="deviceList?.length==0"></empty>
		<!-- 类型、状态 -->
		<u-picker mode="selector" v-model="deviceStatusShow"  :default-selector="[0]" :range="deviceStatusList" @cancel="deviceStatusCancel" @confirm="deviceStatusConfirm"></u-picker>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import empty from '@/components/empty.vue'
import { getSelectList } from '@/common/api/keepPlan'
// import { onShow } from "@dcloudio/uni-app"

import { ref, watch,onMounted,reactive } from 'vue'
// interface keepPlanModel {
//   equpName?: string | number;
//   equpNo?: string | number;
//   equpSpec?: string | number;
//   keepType?: string | number;
//   keepStatus?: string | number;
//   processDesc?: string | number;
//   keepDate?: string;
//   keepPeople?: string | number;
//   remark?: string;
//   id?: string | number;
// }
const form = reactive({
	deviceName: '',
	deviceCode: '',
	deviceType: null,
	deviceStatus: null,
					
})
const mTop = ref<number>(0);
const deviceList = ref<[]>();
const searchShow = ref<boolean>(false);
// 状态
const deviceStatusShow = ref<boolean>(false);
const typeOrStatus = ref<number>(1);
let deviceStatusList = reactive(['月度','季度','年度']);
onMounted(()=>{
	setTimeout(()=>{
		const query = uni.createSelectorQuery();
		query.select('.search-view').boundingClientRect((data:any) => {
			mTop.value = data.height + 112;//112+44+12
			// scrollViewHeight.value = data.height - 112;
		}).exec();
	},500)
	getList();
})
watch(
	() => typeOrStatus.value,
	(newVal) => {
		if(newVal==1){
			deviceStatusList = ['月度','季度','年度'];
		}else{
			deviceStatusList = ['已保养','未保养'];
		}
	},
	{ deep: true }
);
watch(
	() => searchShow.value,
	(newVal) => {
		setTimeout(()=>{
			const query = uni.createSelectorQuery();
			query.select('.search-view').boundingClientRect((data:any) => {
				mTop.value = data.height + 112;//112+44+12
				// scrollViewHeight.value = data.height - 112;
			}).exec();
		},10)
	},
	{ deep: true }
);
const mTopFn = ()=> {
    return {height: `calc(100% - ${mTop.value}px)`,};
}
async function getList(): Promise<void> {
	const data = await getSelectList({
		equpName: form.deviceName,
		equpNo: form.deviceCode,
		keepStatus: form.deviceStatus,
		keepType:form.deviceType
	})
	deviceList.value = data;
}
//搜索
const searchForm = () => {
	// if(form.deviceName && !uni.$u.test.chinese(form.deviceName)){
	// 	uni.showToast({
	// 		title: '【设备名称】错误，请正确编写',
	// 		icon: 'none',
	// 	});
	// 	return
	// }
	// if(form.deviceCode && !uni.$u.test.number(form.deviceCode)){
	// 	uni.showToast({
	// 		title: '【设备编码】错误，请正确编写',
	// 		icon: 'none',
	// 	});
	// 	return
	// }
	getList();

};
//设备状态切换
const deviceStatusConfirm = (e:any)=>{
	if(typeOrStatus.value == 1){
		form.deviceType = deviceStatusList[e[0]];
	}else{
		form.deviceStatus = deviceStatusList[e[0]];
	}
}
//设备状态取消
const deviceStatusCancel = ()=>{
	if(typeOrStatus.value == 1){
		form.deviceType = '';
	}else{
		form.deviceStatus = '';
	}
}
//跳转保养登记
const goFalutHandle = (data)=> {
	uni.navigateTo({
		url: `/pages/MaintainRegister/index?item=${JSON.stringify(data)}&isList=1`
		// url: `/pages/DeviceFaultRegister/faultConfirm?item=${JSON.stringify(data)}`
	});
}
</script>

<style lang="scss" scoped>
	.bgfff{
		background-color: #fff;
	}
	.page-view{
		position: relative;
		height: 100%;
	}
	.search-view{
		::v-deep .u-form{
			padding: 0 32rpx;
			.u-form-item{
				border-bottom: 1rpx solid #E7ECED;
				padding: 0;
				flex-direction: inherit;
				.u-form-item__body{
					width: 100%;
				}
				.u-form-item--right{
					width: calc(100% - 160rpx);
				}
				.u-form-item--left__content__label{
					height: 48rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.65);
					line-height: 48rpx;
				}
			}
		}
		.select-img{
			transform: rotate(180deg);
		}
		.isSelect{
			transform: rotate(-90deg);
		}
	}
	.search-btn{
		padding: 30rpx 24rpx;
		margin-top: 10rpx;
		.btn{
			width: 100%;
			background: #2F7BFF;
			border: 1rpx solid #2F7BFF;
			color: #FFFFFF;
			height: 88rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
	.content-view{
		overflow-y: auto;
		.item-view{
			padding: 32rpx;
			flex-wrap: wrap;
			.flex-wrap-left{
				flex-wrap: nowrap;
			}
			label{
				width: 126rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
			text{
				width: calc(100% - 126rpx);
			}
		}
	}
</style>
